article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
    margin: 0;
    padding: 0;
    color: inherit;
}
html,body{
  font-size: 16px;
  background: #17151c
}
article,aside,dialog,footer,header,section,footer,nav,figure,menu {
  display:block
}
a{
    text-decoration: none;
}
ul,li{
    list-style: none
}
.flex{
    display: box;
    display: -webkit-box;
    display: flex;
}
.topflex{
    box-flex:1;
    flex:1
}
.height{
    height: 100%
}

.row{
    width:100%;
    display: flex;
}
.row1 {
    width:100%;
    height: 40%;
}
.row2{
    width:100%;
    height: 60%
}
.fl{
    float: left
}
.hello {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    padding: 38px 0 0.5rem 60px;
    box-sizing: border-box;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
}
.width20 {
    width: 20%;
}
.width25{
    width: 25%
}
.width30{
    width:30%

}
.width35 {
    width: 35%;
}
.width40{
    width:40%
}
.width45 {
    width: 45%;
}
.width50{
    width: 50%
}
.width60{
    width:60%
}
.width65{
    width:65%
}
.width70{
    width: 70%
}
.width100{
    width:100%
}
.height27{
    height: 27%;
}
.hegiht46{
    height: 46%;
}
.height45{
    height: 45%;
}
.height55{
    height: 55%;
}
.height50{
    height: calc(50% - 0.5rem);
    margin: 0.5rem;
    box-sizing: border-box;
}
.one{
    display: flex;
    flex-direction:column;
}
.grid {
    position: relative;
    margin: .5rem;
    background-color: #242428;
    box-sizing: border-box;
    color: #fff;
    overflow: hidden;
}
.plat1 {
    font-size: 14px;
    text-align: left;
    color: #fff;
    margin-left: -.625rem;
    border-top: solid;
    border-width: .0625rem;
    border-color: #3a3a3a;
    box-sizing: border-box;
}
.top{
    height: calc(50% - 0.5rem);
    margin: 0 1rem 1rem 0;
    background-color: #242428;
}
.bottom{
    margin: 0.5rem 0;
    background-color: #242428;
}
.contain{
    background: #17151c;
    position: absolute;
    height: 100%;
    width: 100%;
}
.big{
    margin: .5rem ;
}
.content-center {
    height: 33.33%;
    color: #fff;
    border-top:1px solid #3a3a3a;
}
.name-word{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #898989;
    flex:1;

    .name{
        display: block
    }
    .num{
        display: block;
        color: #fff;
        font-size: 1.5625rem;
    }
}
.grid-title {
    padding: 0 1.125rem;
    line-height: 2.1875rem;
    height: 2.1875rem;
    color: #ccc;
    font-size: .8125rem;
    text-align: left;
    border-bottom: .0625rem solid #3a3a3e;
}
.grid-body{
    height: calc(100% - 36px)
}
.grid-foot {
    padding: 0 1.125rem;
    line-height: 2.1875rem;
    height: 2.1875rem;
    color: #ccc;
    font-size: .8125rem;
    text-align: left;
    border-top: .0625rem solid #3a3a3e;
}
.center{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;

}
.block {
    display: block;
    width: 100%;
    height: 100%;
}
